(function($){

var defaultOptions = {
    valueRange: [12, -12],
    positionRnage: [0, 133],
    defaultValue: 0,
    onchange: function(){}
};

$.fn.range = function(options){
    options = $.extend({}, defaultOptions, options);
    
    var value = options.valueRange[0];
    var $knob = this.find('.range-knob');

    function getValueByPosition(position){
        var vr = options.valueRange;
        var pr = options.positionRnage;
        return vr[0] + (vr[1] - vr[0]) * (position - pr[0]) / (pr[1] - pr[0]);
    }

    function getPositionByValue(value){
        var vr = options.valueRange;
        var pr = options.positionRnage;
        return pr[0] + (pr[1] - pr[0]) * (value - vr[0]) / (vr[1] - vr[0]);
    }

    $knob.draggable({
        axis: 'y',
        containment: 'parent',
        stop: function(e, params){
            position = params.position.top;
            value = getValueByPosition(position);
            options.onchange(value);
        }
    });

    this.setValue = function(val){
        if(val > options.valueRange[0]) val = options.valueRange[0];
        if(val < options.valueRange[1]) val = options.valueRange[1];
        value = val;
        options.onchange(val);
        return $knob.css('top', getPositionByValue(val)+'px');
    };
    this.getValue = function(){
        return value;
    };

    this.setValue(options.defaultValue);

    return this;
};

})(jQuery);